<template>
	<view class="">
		<view class="bg" v-show="!istoken">
			<!-- <u-loading mode="circle" color="#fff" show="true" size="36"></u-loading> -->
			<!-- <u-loading mode="flower"></u-loading> -->
			<!-- <u-loadmore status="loading" :load-text="loadText.nomore" /> -->
		</view>
		<view class="login" v-show="istoken">
			<!-- icon -->
			<view class="icon">
				<view>
					<u-icon name="checkmark-circle-fill" color="#8B0000"></u-icon>
					<text>30天无忧退货</text>
				</view>
				<view>
					<u-icon name="checkmark-circle-fill" color="#8B0000"></u-icon>
					<text>48小时快速退费</text>
				</view>
				<view>
					<u-icon name="checkmark-circle-fill" color="#8B0000"></u-icon>
					<text>满88元免邮费</text>
				</view>
			</view>
			<!-- 订单 -->
			<view class="order">
				<view class="item" v-for="(item, index) in obj.cartList" :key="index">
					<!-- <label class="radio"><radio value="r1" :disabled="isShowNum" :checked="item.checked == 1" @tap="changeCheck(item)" /></label> -->

					<u-checkbox-group placement="column" @change="changeCheck(item)">
						<u-checkbox
							:checked="item.checked == 1"
							:customStyle="{ marginBottom: '8px' }"
							shape="circle"
							:key="index"
							:label="item.name"
							:name="item.name"
							:disabled="isShowNum"
						></u-checkbox>
					</u-checkbox-group>
					<!-- <label class="radio">
						<checkbox value="r1" :disabled="isShowNum" :checked="item.checked == 1" @tap="changeCheck(index)" />
						<text>全选</text>
					</label> -->

					<view class="right">
						<image :src="item.list_pic_url" mode=""></image>
						<view class="right_txt">
							<text class="top">{{ item.goods_name }}</text>
							<view class="bottom">
								<text class="one">{{ item.retail_price | toPrice }}</text>
								<!-- toPrice -->
								<text class="two">x{{ item.number }}</text>
							</view>
							<view class="btn" v-if="isShowNum">
								<button class="add" @tap="add(-1, item)">-</button>
								<text>{{ item.number }}</text>
								<button class="remove" @tap="add(1, item)">+</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 累计提示 -->
			<!-- 合计 -->
			<view class="pos">
				<view class="total_txt">
					累计共2件商品，可点击
					<text @tap="changeshownum" :style="{ backgroundColor: isShowNum ? '#ee0a24' : '#07c160' }">{{ txt }}</text>
					按钮进行商品数量修改
				</view>
				<view class="total">
					<!-- 	<label class="radio">
						<radio value="r1" :checked="checkedAll" @tap="changeAll" />
						全选
					</label> -->

					<u-checkbox-group placement="column">
						<u-checkbox :checked="checkedAll" @change="changeAll" label="全选" shape="circle" :disabled="isShowNum"></u-checkbox>
					</u-checkbox-group>
					<!-- 	<label class="radio">
						<checkbox value="r1" :checked="checkedAll" @tap="changeAll" />
						<text>全选</text>
					</label> -->
					<view class="right">
						<view class="rightflex">
							<text class="all">合计:</text>
							<text class="price">{{ total | toPrice }}</text>
						</view>
						<u-button type="error" shape="circle" size="medium" class="custom-style btn1">立即购买</u-button>
					</view>
				</view>
			</view>
		</view>
		<tab></tab>
	</view>
</template>

<script>
import tab from '@/custom-tab-bar/index.vue';
import { mapState, mapMutations } from 'vuex';
import { cartApi, cartaddApi, checkedApi } from '../../utils/api.js';
export default {
	components: {
		tab
	},
	computed: {
		...mapState({
			istoken: state => state.login.istoken
		}),
		// 计算价格
		total: {
			get() {
				return this.obj.cartList.reduce((pre, cur) => {
					if (cur.checked == 0) {
						return pre;
					} else {
						return pre + cur.retail_price * cur.number;
					}
				}, 0);
			},
			set() {}
		}
	},
	data() {
		return {
			// checkboxValue1: [],
			// 基本案列数据
			// checkboxList1: [
			// 	{
			// 		name: '苹果',
			// 		disabled: false
			// 	},
			// 	{
			// 		name: '香蕉',
			// 		disabled: false
			// 	},
			// 	{
			// 		name: '橙子',
			// 		disabled: false
			// 	}
			// ],
			checkedAll: false,
			// 购物车
			isShowNum: false,
			txt: '编辑',
			obj: {
				cartList: [
					{
						goods_name: '母亲节礼物-舒适安睡组合',
						goods_specifition_name_value: '1.5m床垫*1+枕头*2;浅杏粉',
						list_pic_url: 'http://yanxuan.nosdn.127.net/1f67b1970ee20fd572b7202da0ff705d.png',
						number: 1,
						market_price: 999,
						retail_price: 999,

						checked: 1,
						goods_id: 1181000,
						goods_sn: 'Y100300',
						goods_specifition_ids: '1_3',
						id: 53155,
						product_id: 1,
						session_id: 1,
						user_id: '21478'
					},
					{
						checked: 1,
						goods_id: 1181003,
						goods_name: '青翠灵动 龙泉青瓷经典餐具23件套',
						goods_sn: '1181003',
						goods_specifition_ids: '',
						goods_specifition_name_value: '',
						id: 53159,
						list_pic_url: 'https://yanxuan-item.nosdn.127.net/e13cde62530ea69b6dcf4b8424e2ebfa.jpg?type=webp&imageView&quality=75&thumbnail=750x0',
						market_price: 105,
						number: 1,
						product_id: 246,
						retail_price: 105,
						session_id: 1,
						user_id: '21478'
					}
				],
				cartTotal: {
					checkedGoodsCount: 1,
					goodsCount: 1,
					checkedGoodsAmount: 999,
					goodsAmount: 999
				}
			}
		};
	},
	methods: {
		async changeCheck(item) {
			console.log(item);
			let res = null;
			let rescheckedApi = null;

			rescheckedApi = await checkedApi({
				isChecked: item.checked == 0 ? '1' : '0',
				productIds: item.product_id
			});
			console.log(rescheckedApi);
			let { cartList, cartTotal } = rescheckedApi.data;
			this.obj.cartList = cartList;
			this.obj.cartTotal = cartTotal;
			this.checkAll();
		},
		checkAll() {
			// this.checkedAll = true;
			// this.obj.cartList.forEach(item => {
			// 	console.log(item.checked);
			// 	if (item.checked == 0) {
			// 		this.checkedAll = false;
			// 	}
			// });
			this.checkedAll = this.obj.cartList.every(item => item.checked == 1);
		},
		async changeAll() {
			// this.checkedAll = !this.checkedAll;
			// console.log(this.checkedAll);
			// this.obj.cartList.forEach(item => {
			// 	item.checked = this.checkedAll ? 1 : 0;
			// 	console.log(item.checked);
			// });

			// 先获取所有产品的id
			let productIds = this.obj.cartList.map(item => item.product_id);
			// 发起请求
			// 判断是否为全选
			// console.log(productIds.join(','));
			let res = null;
			let rescheckedApi = null;
			if (this.checkedAll) {
				rescheckedApi = await checkedApi({
					isChecked: 0,
					productIds: productIds.join(',')
				});
			} else {
				rescheckedApi = await checkedApi({
					isChecked: 1,
					productIds: productIds.join(',')
				});
			}
			console.log(rescheckedApi);
			let { cartList, cartTotal } = rescheckedApi.data;
			this.obj.cartList = cartList;
			this.obj.cartTotal = cartTotal;
			this.checkAll();
		},
		changeshownum() {
			if (this.txt == '编辑') {
				this.txt = '完成编辑';
			} else {
				this.txt = '编辑';
			}
			this.isShowNum = !this.isShowNum;
			this.obj.cartList.forEach(item => {
				item.disabled = this.isShowNum;
				console.log(item.checked);
			});
		},
		async add(num, item) {
			if (num == -1 && item.number == 1) {
				return;
			}
			item.number += num;
			console.log(item);
			let res = await cartaddApi({ goodsId: item.goods_id, id: item.id, number: item.number, productId: item.product_id });
			console.log('商品+', res);
		}
	},
	async onShow() {
		// 判断是否有token
		let token = uni.getStorageSync('token');
		if (!token) {
			// 跳转到登录页面
			// 询问是否到登录页面
			console.log('未登录');

			return;
		}
		this.$store.commit('changevalue', 3);

		// console.log(token);
		let res = await cartApi(token);
		console.log(res);
		this.obj.cartList = res.data.cartList;
		this.obj.cartTotal = res.data.cartTotal;
		this.checkAll();
	}
};
</script>

<style lang="scss">
page {
	background-color: #efefef;
}

.bg {
	position: fixed;
	top: 450rpx;
	left: 250rpx;
	background-color: #333;
	width: 300rpx;
	height: 300rpx;
	border-radius: 20rpx;
	opacity: 0.85;
}
.login {
	.icon {
		display: flex;
		font-size: 30rpx;
		justify-content: space-around;
		padding: 20rpx 0;
		view {
			display: flex;
		}
	}
	.order {
		background-color: #fff;
		// height: 200rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		.item {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1px solid #ccc;
			.radio {
				margin: 0 10rpx;
			}
			.right {
				background-color: #fafafa;
				display: flex;
				flex: 1;
				padding: 20rpx 20rpx;
				border-right: 1px solid #f40;
				box-sizing: border-box;
				.right_txt {
					flex: 1;
					margin-left: 30rpx;
					// height: 176rpx;
					display: flex;
					flex-direction: column;
					// justify-content: space-between;
					.top {
						font-size: 32rpx;
					}
					.bottom {
						margin-top: 80rpx;
						display: flex;
						justify-content: space-between;
						.one {
							font-size: 34rpx;
						}
						.two {
							color: #666;
							font-size: 26rpx;
							margin-top: 6rpx;
						}
					}
					.btn {
						margin-left: 154rpx;
						margin-top: 4rpx;
						text-align: center;
						display: flex;
						height: 56rpx;
						line-height: 56rpx;
						button {
							line-height: 56rpx;
							background-color: #f2f3f5;
							width: 70rpx;
						}
						.add {
							text-align: center;
						}
						text {
							width: 56rpx;
							background-color: #f2f3f5;
							padding: 10rpx 20rpx;
							line-height: 40rpx;
							height: 56rpx;
							box-sizing: border-box;
							margin: 0 6rpx;
						}
						.remove {
							text-align: center;
						}
					}
				}
				image {
					width: 176rpx;
					height: 176rpx;
				}
			}
		}
	}
}
.total_txt {
	background-color: #fff7cc;
	height: 120rpx;
	font-size: 30rpx;
	color: #f56723;
	display: flex;
	align-items: center;
	justify-content: center;
	text {
		background-color: #07c160;
		color: #fff;
		width: 84rpx;
		text-align: center;
		height: 64rpx;
		line-height: 64rpx;
		display: inline-block;
		margin: 0 10rpx;
	}
}
.pos {
	position: fixed;
	width: 100%;
	bottom: 98rpx;
}
.total {
	width: 100%;
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 20rpx;
	justify-content: space-between;
	font-size: 30rpx;
	box-sizing: border-box;
	radio {
		height: 96rpx;
		line-height: 96rpx;
	}
	.right {
		display: flex;
		align-items: center;
		flex: 1;
		padding-left: 30rpx;
		justify-content: space-between;
		.rightflex {
			width: 310rpx;
		}
		.all {
			// width: 148rpx;
			font-size: 30rpx;
		}
		.price {
			color: #ee0a24;
			font-size: 30rpx;
			margin-right: 20rpx !important;
			width: 326rpx;
		}

		/deep/ .u-button {
			width: 230rpx !important;
			background-color: #f01426;
		}
		.custom-style {
			background-color: #f01426;
			height: 92rpx;
			font-size: 30rpx;
			float: right;
			margin: 0;
		}
	}
}
</style>
